import { Button } from 'antd';
import { useRef, useState } from 'react';
import type {
  YmChoiceStaffModalProps,
  orgRequestParams,
  posRequestParams,
  roleRequestParams,
} from 'ym-design';
import { YmChoiceStaffModal } from 'ym-design';
const orgMockData = require('./mockData/orgMockData');
const roleMockData = require('./mockData/roleMockData');
const posMockData = require('./mockData/posMockData');

function YmChoiceStaffModalPage() {
  const defaultChoiceValue: YmChoiceStaffModalProps['value'] = [
    //部门
    {
      choiceType: 'org',
      combineId:
        'cc7521b5405349b0b0a20af6e36ce290_83d898a37d0d4becbdc91a8ff135a42f',
      guid: '83d898a37d0d4becbdc91a8ff135a42f',
      name: '加人了zyj加人了，再次加人了',
    },
    {
      choiceType: 'org',
      combineId:
        'cc7521b5405349b0b0a20af6e36ce290_4b5cf5de4a7c47fbb6032944725f1e36',
      hdpic: undefined,
      personId: '4b5cf5de4a7c47fbb6032944725f1e36',
      personName: '肖奇峰',
      phone: '17679373028',
    },
    // 岗位
    {
      choiceType: 'pos',
      combineId:
        'f3cf76a700b44d3ea128122a4d79f127_5487a8fe31fc4289a7a50ed7a1e8ce8f',
      guid: '5487a8fe31fc4289a7a50ed7a1e8ce8f',
      name: '车队长',
    },
    // 角色
    {
      choiceType: 'role',
      combineId:
        'f3cf76a700b44d3ea128122a4d79f127_1df516d4d99e44bbb2c405b4976ea065',
      guid: '1df516d4d99e44bbb2c405b4976ea065',
      name: '测试角色',
    },
  ];
  const [choiceValue, setChoiceValue] =
    useState<YmChoiceStaffModalProps['value']>(defaultChoiceValue);
  const choiceStaffRef = useRef<{ open: () => void }>(null);
  const staffModalRef = useRef<HTMLDivElement>(null);
  const entId = 'f3cf76a700b44d3ea128122a4d79f127';

  const orgRequestFn: YmChoiceStaffModalProps['orgRequest'] = async (
    params: orgRequestParams,
  ) => {
    // const orgResult: any = await choiceStaffApi.getOrgList(params);
    // return orgResult.data;
    return orgMockData;
  };

  const roleRequestFn: YmChoiceStaffModalProps['roleRequest'] = async (
    params: roleRequestParams,
  ) => {
    // const roleResult: any = await choiceStaffApi.getRoleByGroup(params);
    // return roleResult.data;
    return roleMockData;
  };

  const posRequestFn: YmChoiceStaffModalProps['posRequest'] = async (
    params: posRequestParams,
  ) => {
    // const posResult: any = await choiceStaffApi.getPositionByGroup(params);
    // return posResult.data;
    return posMockData;
  };

  const handleStaffChange = (
    selectedList: YmChoiceStaffModalProps['value'],
  ) => {
    console.log(
      '--YmChoiceStaffModalPage--handleStaffChange--selectedList--:',
      selectedList,
    );
    setChoiceValue(selectedList);
  };

  return (
    <div>
      <div ref={staffModalRef}>
        modalPorps.getContainer， dumi样式兼容，实际开发中如非必要请勿配置
      </div>
      <YmChoiceStaffModal
        modalPorps={{
          getContainer: () => staffModalRef.current!,
        }}
        value={choiceValue}
        requestParams={{ entId, entName: '董西荣测试公司' }}
        orgRequest={orgRequestFn}
        roleRequest={roleRequestFn}
        posRequest={posRequestFn}
        ref={choiceStaffRef}
        onlyChoicePeople={true}
        choiceBtn="checkbox"
        onChange={handleStaffChange}
      />
      <Button
        onClick={() => {
          choiceStaffRef.current?.open();
        }}
      >
        选择人员
      </Button>
    </div>
  );
}

export default YmChoiceStaffModalPage;
